<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link href="css/my.css" rel="stylesheet" />
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			.mui-table-view-cell>.mui-slider-handle {
			    position: relative;
			    background-color: floralwhite;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bc2">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">阅读记录</h1>
			<span class="mui-icon mui-icon-trash" style="float:right;color:red;" id="delAll"></span>
		</header>
		<div class="mui-content mui-scroll-wrapper bc">
			<div class="mui-scroll">
				<div class="mui-card bc2">
					<div class="mui-card-content">
						<ul class="mui-table-view bc2" id="chapterList" style="font-size: 16px;line-height: 1.5;">
						</ul>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/config.js"></script>
	<script src="js/date.js"></script>
	<script src="js/book.js"></script>
	<script>
		var self;
		var deviceNum;
		var next = 1;
		var sort = 'desc';
		mui.init({
			pullRefresh: {
				container: '.mui-content', //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				up: {
					height: 50, //可选.默认50.触发上拉加载拖动距离
					auto: false, //可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: more //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			}
		});
		mui.plusReady(function() {
			self = plus.webview.currentWebview();
			deviceNum = plus.storage.getItem("deviceNum");
			if (deviceNum == null || deviceNum == "") {
				mui.toast('获取设备号失败，请确认是否开启权限', {
					duration: 'short',
					type: 'div'
				})
				return;
			}
			page();
		});

		function page() {
			mui.ajax(config.config.path + "/book-tag/page?limit=15&page=1&sort=" + sort + "&sort_column=create_time&device_num=" +
				deviceNum, {
					type: "GET",
					dataType: "json",
					success: function(result) {
						var code = result.code;
						if (code == 200) {
							var ele = document.getElementById("chapterList");
							var html = "";
							for (j = 0, len = result.data.records.length; j < len; j++) {
								var str = result.data.records[j].bookName + ' - ' + result.data.records[j].chapterTitle;
								if (str.length >= 23) str = str.substr(0, 23) + '...';
								html = html + '<li id="' + result.data.records[j].id 
									+ '" cId="' + result.data.records[j].chapterId
									+ '" name="' + result.data.records[j].bookName 
									+ '" bookId="'+result.data.records[j].bookId 
									+ '" bookNum="'+result.data.records[j].bookNumber
									+ '" chapterNum="'+result.data.records[j].chapterNum
									+ '" chapterTitle="'+result.data.records[j].chapterTitle
									+ '" class="mui-table-view-cell" >' 
									+ '<div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red">删除</a></div><div class="mui-slider-handle">' 
									+ str + '</div></li>';
							}
							ele.innerHTML = html;
							next = 2;
						}
					}
				});
		}


		function more() {
			mui.ajax(config.config.path + "/book-tag/page?limit=15&page=" + next + "&sort=" + sort +
				"&sort_column=create_time&device_num=" + deviceNum, {
					type: "GET",
					dataType: "json",
					success: function(result) {
						var code = result.code;
						if (code == 200) {
							if (result.data.records.length > 0) {
								var ele = document.getElementById("chapterList");
								var html = "";
								for (j = 0, len = result.data.records.length; j < len; j++) {
									var str = result.data.records[j].bookName + '-' + result.data.records[j].chapterTitle;
									if (str.length >= 23) str = str.substr(0, 23) + '...';
									html = html + '<li id="' + result.data.records[j].id 
									+ '" cId="' + result.data.records[j].chapterId 
									+ '" name="'+result.data.records[j].bookName
									+ '" bookId="'+result.data.records[j].bookId
									+ '" bookNum="'+result.data.records[j].bookNumber
									+ '" chapterNum="'+result.data.records[j].chapterNum
									+ '" chapterTitle="'+result.data.records[j].chapterTitle
									+ '" class="mui-table-view-cell" >' + str +
										'</li>';
								}
								ele.innerHTML = html;
								next++;
								mui('.mui-content').pullRefresh().endPullupToRefresh(false);
							} else {
								mui('.mui-content').pullRefresh().endPullupToRefresh(true);
							}
						}
					}
				});
		}


		document.getElementById("delAll").addEventListener('tap',function(){
			mui.confirm('确认清空阅读记录吗？', '提示', ['确认', '取消'], function(e) {
				if (e.index == 0) {
					mui.ajax(config.config.path + "/book-tag/clear?device_num=" + deviceNum, {
						dataType: 'json', //服务器返回json格式数据
						type: 'DELETE', //HTTP请求类型
						success: function(data) {
							page();
						},
						error: function(xhr, type, errorThrown) {}
					});
				}
			}, 'div');
		})
		mui("#chapterList").on('tap', '.mui-table-view-cell', function() {
			//获取id
			var cId = this.getAttribute("cId");
			var name = this.getAttribute("name");
			var bookId = this.getAttribute("bookId");
			var bookNum = this.getAttribute("bookNum");
			var chapterNum = this.getAttribute("chapterNum");
			var chapterTitle = this.getAttribute("chapterTitle");
			//传值给详情页面，通知加载新数据
			chapter(cId,name,bookId,bookNum,chapterNum,chapterTitle); 
		});
		
		mui("#chapterList").on('slideleft', '.mui-table-view-cell', function() {
			//获取id
			var id = this.getAttribute("id");
			var elem = this;
			//传值给详情页面，通知加载新数据
			mui.confirm('删除此条记录吗？', '提示', ['删除', '取消'], function(e) {
				if (e.index == 0) {
					mui.ajax(config.config.path + "/book-tag/" + id, {
						dataType: 'json', //服务器返回json格式数据
						type: 'DELETE', //HTTP请求类型
						success: function(data) {
							document.getElementById(id).style.display = "none";
						},
						error: function(xhr, type, errorThrown) {}
					});
				} else {
                    setTimeout(function () {
                        mui.swipeoutClose(elem);
                    }, 0);
                }
			}, 'div');
		});
	</script>
</html>
